import React, { Component } from "react";
import { Pagination } from "antd";
import { connect } from "dva";
import styles from "./TemplateContent.less";

@connect(store => ({
  templateList: store.templateCenter
}))
export default class TemplateContent extends Component {
  state = {
    page: {
      current: 1,
      pageSize: 10,
      total: 0
    },
    listDatas: []
  };

  // componentDidMount() {
  // 	//this.init();
  // }

  init = (page, pageSize) => {
    const { dispatch } = this.props;
    const obj = {
      pageIndex: page,
      pageSize
      // topic: type
    };
    dispatch({
      type: "templateCenter/msgTemplateQuery",
      payload: obj
    });
    // const { modelList,totalCount } = this.props.templateList;
    // console.log( modelList,totalCount);
  };

  changePage = (page, pageSize) => {
    this.init(page, pageSize);
  };

  render() {
    const { modelList, totalCount } = this.props.data;
    const { current, pageSize } = this.state.page;
    return (
      <div className={styles.root}>
        <ul className={styles.templeteUl}>
          {modelList &&
            modelList.map((item, index) => {
              const number =
                (parseInt(current, 10) - 1) * parseInt(pageSize, 10) +
                index +
                1;
              return (
                <li key={index} className={styles.templeteLi}>
                  <div className={styles.content}>
                    <div className={styles.innerContent}>
                      <div className={styles.titleDiv}>
                        <p className={styles.temTitle}>{item.title}</p>
                        <p className={styles.timer}>
                          <span>{item.creator}</span>
                          <span>{item.createTime}</span>
                        </p>
                      </div>
                      <p className={styles.connectDiv}>{item.content}</p>
                    </div>
                  </div>
                  <div className={styles.title}>
                    模板
                    {number}
                  </div>
                </li>
              );
            })}
        </ul>
        <Pagination
          className={styles.pagination}
          current={this.state.page.current}
          pageSize={this.state.page.pageSize}
          total={totalCount === undefined ? 0 : totalCount}
          pageSizeOptions={["5", "10", "20"]}
          showTotal={total => `共 ${total} 条记录`}
          showQuickJumper
          showSizeChanger
          onChange={(page, size) => {
            this.changePage(page, size);
          }}
          onShowSizeChange={(cur, size) => {
            this.changePage(cur, size);
          }}
        />
      </div>
    );
  }
}
